﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <style>
        fieldset{border:1px solid red;}
        #app input[type=text]{
            width:100%;padding:5px 15px;box-sizing:border-box;margin-bottom:10px;
        }
        #app button {
            padding: 5px 15px;            
        }
    </style>
</head>
<body>
    <script src="@Url.Content("~/Scripts/vue.js")"></script>
    <script src="@Url.Content("~/Scripts/vue-resource.min.js")"></script>
    <script src="~/Scripts/vue-router.min.js"></script>
    <script id="login" type="text/template">
        <form onsubmit="return false;" v-on:submit="login">
            <fieldset>
                <legend>登录</legend>
               
                <input type="text" v-model="LoginName" placeholder="登录名" /><br />
                <input type="text" v-model="Password" placeholder="密码" /><br />
                <button type="submit">登录</button>
                <a v-link="{ path: '/regist' }">注册</a><br />
            </fieldset>
        </form>
    </script>
    <script id="regist" type="text/template">
        <form onsubmit="return false;" v-on:submit="regist">

            <fieldset>
                <legend>注册</legend>
                <input type="text" v-model="LoginName" placeholder="登录名" /><br />
                <input type="text" v-model="Password" placeholder="密码" /><br />
                <button type="submit">注册</button>
                <a v-link="{ path: '/login' }">登录</a>

            </fieldset>

        </form>
    </script>
    <div id="app">
        <h1>Hello App!</h1>
        @*<p>            
            <a v-link="{ path: '/login' }">Go to Login</a>
            <a v-link="{ path: '/regist' }">Go to Regist</a>
        </p>*@
        <!-- 路由外链 -->
        <router-view></router-view>
    </div>
    <script>
        var LoginComponent = Vue.extend({
            data: function () {
                return {
                    LoginName: "",
                    Password:""
                };
            },
            template: "#login",
            methods: {
                login: function () {
                    if (!this.LoginName || !this.Password)
                    {
                        alert("请输入用户名和密码！");
                        return;
                    }
                    this.$http.post("@Url.Action("Login")", { body: "" }, { params: { LoginName: this.LoginName, Password: this.Password } }).then(function (response) {
                        console.log("success===>" + JSON.stringify(response.body));
                        if (response.body.state == "success")
                        {
                            location.href = "@Url.Action("index")";
                        }
                        else
                        {
                            alert(response.body.msg);
                        }                        
                    }, function (response) {                        
                        console.log("error===>" + JSON.stringify(response));
                    }); 
                }
            }
        })
        var RegistComponent = Vue.extend({
            data: function () {
                return {
                    LoginName: "",
                    Password: ""
                };
            },
            template: "#regist",
            methods: {
                regist: function () {
                    console.log(this.result);
                    this.$http.post("@Url.Action("Regist")", { body: "" }, { params: { LoginName: this.LoginName, Password: this.Password } }).then(function (response) {
                        console.log("success===>" + response.body);                        
                    }, function (response) {                        
                        console.log("error===>" + JSON.stringify(response));
                    }); 
                }
            }
        })
        Vue.component('login-component', LoginComponent);
        Vue.component('regist-component', RegistComponent)

        var App = {}
        var router = new VueRouter();
        router.map({
            '/': {
                component: LoginComponent
            },
            '/login': {
                component: LoginComponent
            },
            '/regist': {
                component: RegistComponent
            }
        })
        router.start(App, '#app')
    </script>
</body>

</html>
